@mixin icon-style() {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--primary-surface-default);
}

.input-box {
  display: flex;
  flex-direction: column;
}

.label {
  margin-bottom: 8px;
  font: var(--font-bl-small);
  color: var(--primary-text-label);
}

.inputWrapper {
  position: relative;
  display: flex;
  align-items: center;

  span {
    font-variation-settings: 'FILL' 1;
  }

  .icon-left {
    @include icon-style;

    left: 8px;
  }

  .icon-right {
    @include icon-style;

    right: 8px;
  }
}

.input {
  flex: 1;
  padding: 12px 16px;
  background-color: var(--primary-surface-subtle);
  border: 0;
  border-radius: var(--radius-sm);

  &:focus-visible {
    outline: 1px solid var(--primary-border-default);
  }
}

.withIconLeft {
  padding-left: 36px;
}

.withIconRight {
  padding-right: 36px;
}

.icon {
  position: absolute;
}

.iconLeft {
  left: 8px;
}

.iconRight {
  right: 8px;
}
